<template>
  <div class="step line">
    <p class="fs-32 pdt-16 pdb-16 bold">评课步骤</p>
    <div class="df aic jcsb mr-32 ml-32 step-inner">
      <p class="step-inner__line"></p>
      <div
        class="df fdc aic step-item"
        v-for="(item, index) in nav"
        :class="{ actived: index < currStep, active: item.active }"
        :key="index"
      >
        <div class="step-item__inner df aic jcc">
          <svg-icon class="fs-40" :icon-class="item.icon"></svg-icon>
        </div>
        <p class="fs-24" style="white-space: nowrap">{{ item.name }}</p>
      </div>
    </div>
  </div>
  <!-- 课堂情况 -->
  <div class="step-ctx fs-28" v-if="currStep === 1">
    <p class="bold pdt-24 pdb-28">课堂情况</p>
    <div class="font666 pdb-40 pdt-20">
      <p>应到 {{ queryParam.totalNum }}人</p>
    </div>
    <div class="font666 df jcsb pdb-40">
      <p>实到人数</p>
      <van-stepper
        min="0"
        input-width="40"
        button-size="28"
        v-model="queryParam.humanNum"
        integer
      />
    </div>
    <div class="font666 df jcsb pdb-40">
      <p>迟到早退人数</p>
      <van-stepper min="0" input-width="40" button-size="28" v-model="queryParam.lateNum" integer />
    </div>
  </div>
  <!-- 教师情况 -->
  <div class="step-ctx fs-28" v-if="currStep === 2">
    <p class="bold pdt-24 pdb-28">教师情况</p>
    <div class="step-slider pdb-40" v-for="item in queryParam.teacherList" :key="item.id">
      <p class="font666 fs-24 pdb-40">
        {{ item.paragraph }}
      </p>
      <div class="pdl-24 pdr-24 pdb-40 mb-32">
        <van-slider v-model="item.score" bar-height="4px" active-color="#5066E1">
          <template #button>
            <div class="custom-button">{{ item.score }}</div>
          </template>
        </van-slider>
      </div>
    </div>
  </div>
  <!-- 学生情况 -->
  <div class="step-ctx fs-28" v-if="currStep === 3">
    <p class="bold pdt-24 pdb-28">学生情况</p>
    <div class="pdt-24 pdb-24" v-for="item in queryParam.studentList" :key="item.id">
      <p class="pdb-40 fs-24 font666">{{ item.paragraph }}</p>
      <van-radio-group
        class="step-checked"
        v-model="item.level"
        direction="horizontal"
        icon-size="24"
      >
        <van-radio name="A" class="radio-item">等级A</van-radio>
        <van-radio name="B" class="radio-item">等级B</van-radio>
        <van-radio name="C" class="radio-item">等级C</van-radio>
      </van-radio-group>
    </div>
  </div>
  <!-- 点评与建议 -->
  <div class="step-ctx fs-28" v-if="currStep === 4">
    <p class="bold pdt-24 pdb-28">点评</p>
    <textarea
      placeholder="点此输入总体评价："
      class="text-area font666"
      v-model="queryParam.comment"
    ></textarea>
    <p class="bold pdt-24 pdb-28">建议</p>
    <textarea
      placeholder="点此输入建议："
      class="text-area font666"
      v-model="queryParam.suggest"
    ></textarea>
  </div>
  <div class="bottom df jcsb">
    <s-button type="default" v-if="currStep === 1" @click="$emit('end')">取消</s-button>
    <s-button v-if="currStep > 1" @click="prev">上一步</s-button>
    <s-button type="primary" v-if="currStep < 4" size="large" @click="next">下一步</s-button>
    <s-button type="primary" v-if="currStep === 4" size="large" @click="finish">完成</s-button>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted, computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { useStore } from '@/store';
  import { SvgIcon } from '@/components/svg-icon';
  import { SButton } from '@/components/button';
  import { getEvaluateDetail, submitCourseData } from '@/api/source';
  import SDialog from '@/components/dialog';

  export default defineComponent({
    name: 'EditComponent',
    components: {
      SvgIcon,
      SButton,
    },
    emits: ['end', 'start'],
    setup(props, { emit }) {
      const route = useRoute();

      const store = useStore();

      const state = reactive({
        queryParam: {} as any,
        currStep: 1,
        nav: [
          {
            id: 0,
            name: '课堂情况',
            icon: 'video',
            active: true,
          },
          {
            id: 1,
            name: '教师情况',
            icon: 'user',
            active: false,
          },
          {
            id: 2,
            name: '学生情况',
            icon: 'adduser',
            active: false,
          },
          {
            id: 3,
            name: '点评与建议',
            icon: 'edit-square',
            active: false,
          },
        ],
      });
      const classObj = computed(() => {
        console.log(store.getters['common/currClassObj']);
        return store.getters['common/currClassObj'];
      });

      // 下一步
      const next = () => {
        if (state.currStep > 3) {
          return;
        }
        state.currStep++;
        changeTab();
      };
      // 上一步
      const prev = () => {
        if (state.currStep < 1) {
          return;
        }
        state.currStep--;
        changeTab();
      };
      // 完成评课
      const finish = () => {
        SDialog({
          content: '确定提交评价吗？',
          confirmBtn: true,
          submit: async () => {
            await submitCourseData({});
            emit('end', 1);
          },
        });
      };

      const changeTab = () => {
        state.nav.map((v, i) => {
          state.currStep - 1 === v.id ? (v.active = true) : (v.active = false);
        });
      };

      onMounted(async () => {
        console.log(route.query.id);
        state.queryParam = await getEvaluateDetail({
          id: route.query.id,
        });
      });

      return {
        ...toRefs(state),
        classObj,
        next,
        prev,
        finish,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .step {
    padding: 24px;
  }
  .step-ctx {
    padding: 24px 32px 124px;
    width: 686px;
  }
  .step-inner {
    position: relative;
    .step-inner__line {
      position: absolute;
      height: 4px;
      background: #ccc;
      width: 100%;
      top: 50px;
      left: 0;
      z-index: -1;
    }
    .step-item {
      position: relative;
      z-index: 1;
      background: #fff;
      width: 100px;
    }
    .step-item__inner {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid #ccc;
      margin-bottom: 10px;
    }
    .actived {
      .step-item__inner {
        color: #5066e1;
        border: 4px solid #5066e1;
        background: #fff;
      }
    }
    .active {
      color: #5066e1;
      .step-item__inner {
        border: 4px solid #5066e1;
        background: #5066e1;
        color: #fff;
      }
    }
  }
  .bottom {
    height: 88px;
    width: 702px;
    margin-top: auto;
    border-top: 1px solid #999;
    padding: 24px;
    position: fixed;
    bottom: 0;
    background: #fff;
    left: 0;
  }
  .van-radio-group {
    display: flex;
    justify-content: space-around;
  }
  .custom-button {
    width: 48px;
    color: #fff;
    line-height: 48px;
    text-align: center;
    background-color: #5066e1;
    border-radius: 100px;
  }
  .text-area {
    width: 650px;
    height: 130px;
    font-size: 24px;
    border: 1px solid #ccc;
    padding: 24px 16px;
  }
</style>
